<template>
	<h1>vue组件化</h1>
	<Top style="width: 100%;height: 100px;background-color: aliceblue;"></Top>
	<div style="display: flex;flex-direction: row;">
		<Left style="display: flex; width: 20%;height: 100px;background-color: aquamarine;"></Left>
		<router-view style="display: flex; width: 80%;height: 100px;background-color: chartreuse;">
			
		</router-view> 
	</div>
	<Bottom style="width: 100%;height: 50px;background-color: aqua;"></Bottom>
</template>

<script>
	import Left from './components/Left.vue'
	import Right from './components/Right.vue'
	import Top from './components/Top.vue'
	import Bottom from './components/Bottom.vue'
	export default{
		data(){
			return{
				
			}
		},
		components:{
			Left,Right,Top,Bottom
		},
	}
</script>

<style>
	#app {
	  font-family: Avenir, Helvetica, Arial, sans-serif;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  text-align: center;
	  color: #2c3e50;
	  margin-top: 60px;
	}
	* {
		margin: 0;
		padding: 0;
	}
	a {
		text-decoration: none;
	}
	.red {
		background-color: red;
		width: 80px;
		height: 80px;
	}
	.blue {
		background-color: blue;
		width: 80px;
		height: 80px;
	}
	li {
		list-style: none;
	}
	table {
		margin: 20 auto;
	}
</style>